<template>
  <div>
    <el-card
      v-for="item in activitys.records"
      :key="item.oid"
      class="box-card"
      shadow="hover"
    >
      <div slot="header" class="clearfix">
        <el-row style="padding: 0px; height: 10px">
          <el-col :span="12">
            <div>活动名称：{{ item.name }}</div>
            <div style="margin-top: 8px">活动编号：{{ item.preId }}</div>
          </el-col>
          <el-col v-if="!showResult" :span="10" align="right">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="100"
              :on-exceed="handleExceed"
              :file-list="fileList"
              auto-upload
              :name="fileName"
              :headers="headers"
            >
              <el-tooltip
                class="item"
                effect="dark"
                content="输入文件"
                placement="top"
              >
                <el-button
                  size="mini"
                  icon="el-icon-upload2"
                  circle
                ></el-button>
              </el-tooltip>
            </el-upload>
          </el-col>
          <el-col v-if="!showResult" :span="1" align="center">
            <el-tooltip
              class="item"
              effect="dark"
              content="审批"
              placement="top"
            >
              <el-button
                size="mini"
                icon="el-icon-document-checked"
                circle
                @click="approve(item)"
              ></el-button>
            </el-tooltip>
          </el-col>
          <el-col v-if="!showResult" :span="1" align="center">
            <el-tooltip
              class="item"
              effect="dark"
              content="下一步"
              placement="top"
            >
              <el-button
                size="mini"
                icon="el-icon-d-arrow-right"
                circle
                @click="nextStep(item)"
              ></el-button>
            </el-tooltip>
          </el-col>
          <el-col v-if="showResult" :span="12" align="right">
            <el-tooltip
              class="item"
              effect="dark"
              content="计算结果"
              placement="top"
            >
              <el-button
                size="mini"
                icon="el-icon-s-order"
                circle
                @click="nextStep(item)"
              ></el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
      <div class="text item">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="活动编号">
            <span>{{ item.preId }}</span>
          </el-form-item>
        </el-form>
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="活动类型">
            <span>{{ item.type }}</span>
          </el-form-item>
        </el-form>
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="输入">
            <span>{{ item.createTime }}</span>
          </el-form-item>
        </el-form>
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="输出">
            <span>{{ item.status }}</span>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
  import sectionTitle from '@/components/SectionTitle'
  import splitPane from 'vue-splitpane'
  import { getToken } from '@/utils/auth'
  import { deleteAction, getAction, postAction, putAction } from '@/api/action'
  export default {
    name: 'ActivityCard',
    props: {
      /*结构树数据源*/
      dataSource: {
        type: Object,
        required: false,
        default: () => {
          return {
            oid: 'wf-001',
            name: '测试工作流001',
            owner: 'admin',
            creatTime: '2020-7-20',
            status: 1,
            workFlowID: 'wf-001',
            rate: 10,
            currentActivity: { name: '活动1' },
          }
        },
      },
      showResult: {
        type: Boolean,
        required: false,
        default: false,
      },
      activitys: {
        type: Object,
        required: false,
        default: () => {},
      },
    },
    data() {
      return {
        params: {
          method: '',
          data: this.dataSource,
        },
        fileList: [], //上传文件列表
        headers: {
          contentType: 'multipart/form-data; charset=utf-8',
          'presoft-Token': getToken(),
        }, //form表单headers
        uploadUrl: '/presoftasim/licensemanage/userlicense/upload', //上传文件地址
        fileName: 'newFile', //上传文件名称
      }
    },
    methods: {
      //点击按钮向父组件发送自定义事件传递参数
      handleButton: function (method) {
        this.params.method = method
        this.$emit('change', this.params)
      },
      //打开审核模态框
      approve: function (item) {
        this.$emit('approve', item)
      },
      //下一步
      nextStep: function (item) {
        this.$emit('nextStep', item)
      },
      //上传文件列表相关方法
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 100 个文件，本次选择了 ${
            files.length
          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
        )
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
    },
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
